/* app.css */
.selectbox-trigger {
  @apply min-w-[8rem];
}

.selectbox-content {
  @apply max-h-96 min-w-[8rem];
}

.main-content-collapsed-sidebar {
  @apply lg:pl-16 transition-all duration-300 ease-in-out;
}

.main-content-open-sidebar {
  @apply lg:pl-60 transition-all duration-300 ease-in-out;
}

.topbar {
  @apply fixed top-0 right-0 left-0 z-10 h-14 flex items-center px-4 bg-background/80 backdrop-blur-sm supports-[backdrop-filter]:bg-background/60;
  transform: translateZ(0);
}

.mobile-menu-button {
  @apply fixed left-4 top-4 z-50 lg:hidden h-9 w-9 p-0 flex items-center justify-center;
}

.desktop-collapse-button {
  @apply hidden lg:flex absolute top-3 h-4 w-4 items-center justify-center z-50 -right-6 cursor-pointer p-0 text-muted-foreground/0 transition-opacity duration-200;
}

.sidebar-desktop:hover .desktop-collapse-button {
  @apply text-muted-foreground/70 hover:text-muted-foreground;
}

.separator {
  @apply h-6 lg:hidden;
}

.sidebar-container {
  @apply flex h-full flex-col gap-2;
}

.sidebar-content {
  @apply flex h-full flex-col;
}

.sidebar-nav {
  @apply flex flex-col gap-4;
}

.sidebar-header {
  @apply flex h-16 items-center px-4;
}

.sidebar-logo {
  @apply h-10 w-10 rounded-sm transition-all duration-300 mr-3;
}

.sidebar-desktop-collapsed .sidebar-header {
  @apply px-2;
}

.sidebar-desktop-collapsed .sidebar-logo {
  @apply h-8 w-8 rounded-sm ml-3;
}

.sidebar-title {
  @apply text-base font-semibold text-sidebar-foreground;
}

.sidebar-nav-list {
  @apply flex-1 px-2;
}

.sidebar-nav-items {
  @apply space-y-1;
}

.sidebar-nav-link {
  @apply flex items-center gap-x-2 rounded-md px-3 py-2 text-sm font-medium transition-colors text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-none ring-sidebar-ring focus-visible:ring-2;
}

.sidebar-nav-link-active {
  @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
}

.sidebar-nav-link-hover {
  @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
}

.sidebar-icon {
  @apply h-4 w-4 shrink-0;
}

.sidebar-footer {
  @apply text-center text-sm text-gray-400 pb-2;
}

.sidebar-footer-link {
  @apply hover:underline;
}

/* Mobile Sidebar */
.sidebar-mobile {
  @apply flex h-full w-[240px] flex-col bg-sidebar text-sidebar-foreground p-0;
}

.sidebar-mobile-header {
  @apply flex h-14 items-center border-b border-sidebar-border px-4;
}

.sidebar-mobile-title {
  @apply flex items-center gap-3;
}

.sidebar-mobile-close-btn {
  @apply top-4 right-4 h-8 w-8;
}

.sidebar-mobile-content {
  @apply flex-1 overflow-y-auto px-2 py-2;
}

.sidebar-mobile-logo-container {
  @apply w-8 h-8 flex items-center justify-center shrink-0;
}

.sidebar-mobile-name {
  @apply text-lg font-medium text-foreground;
}

/* Desktop Sidebar */
.sidebar-desktop {
  @apply hidden lg:flex fixed left-0 top-0 h-full flex-col bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out z-50;
}

.sidebar-desktop-collapsed {
  width: 64px;
}

.sidebar-desktop-expanded {
  width: 240px;
}

.sidebar-desktop-content {
  @apply flex-1 overflow-y-auto px-2 py-2;
}

.loading-container {
  @apply flex items-center justify-center;
  width: 400px;
  height: 400px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-content {
  @apply text-center flex flex-col items-center gap-2;
  width: 100%;
}

.loading-spinner {
  @apply animate-spin rounded-full h-12 w-12 border-b-2 border-slate-600 mx-auto mb-4;
}

.loading-text {
  @apply text-gray-600;
}

.dynamiccomponent-container {
  @apply flex flex-col w-full;
}

.dynamiccomponent-row {
  @apply flex flex-row w-full;
}

.dynamiccomponent-component {
  @apply bg-background rounded-lg transition-all duration-200 hover:border-muted-foreground/20;
  min-width: 0;
}

.dynamiccomponent-hidden {
  @apply hidden;
}

.dynamiccomponent-separator {
  @apply w-px bg-gray-200 my-0.5 mx-0.5 h-auto;
}

.dashboard-container {
  @apply min-h-screen;
}

.dashboard-error {
  @apply w-full text-sm mb-4;
}

.dashboard-error-fragment {
  @apply w-full;
}

.dashboard-loading-container {
  @apply flex items-center justify-center h-64;
}

.dashboard-loading-content {
  @apply text-center space-y-4;
}

.dashboard-loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto;
}

.dashboard-loading-text {
  @apply text-sm text-muted-foreground;
}

.dashboard-empty {
  @apply flex items-center justify-center h-64;
}

.dashboard-empty-with-errors {
  @apply flex flex-col items-center justify-center space-y-4 h-64;
}

.dashboard-empty-text {
  @apply text-sm text-muted-foreground;
}

.alertwidget-container {
  @apply relative flex gap-x-4 items-center p-4;
}

.alertwidget-icon {
  @apply h-4 w-4;
}

.button-container {
  @apply w-full sm:w-auto px-2 py-1;
}

.button-disabled {
  @apply cursor-not-allowed;
}

.button-loading {
  @apply flex items-center justify-center gap-2;
}

.button-spinner {
  @apply h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent;
}

.checkbox-container {
  @apply flex items-start space-x-3 space-y-0;
}

.checkbox-label-container {
  @apply space-y-1 leading-none;
}

.checkbox-label {
  @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
}

.checkbox-description {
  @apply text-sm text-muted-foreground;
}

.connectioninterface-card {
  @apply w-full;
}

.connectioninterface-card-content {
  @apply space-y-4;
}

.connectioninterface-input-group {
  @apply space-y-2;
}

.connectioninterface-button {
  @apply w-full;
}

.unknownwidget-container {
  @apply border-2;
}

.unknownwidget-icon {
  @apply h-4 w-4;
}

.unknownwidget-description {
  @apply mt-2;
}

.unknownwidget-text {
  @apply space-y-2 text-sm;
}

.unknownwidget-code {
  @apply font-mono bg-muted px-1 py-0.5 rounded;
}

.unknownwidget-muted-text {
  @apply text-muted-foreground;
}

.inputfield-container {
  @apply space-y-2;
}

.inputfield-label {
  @apply text-sm font-medium;
}

.inputfield-error {
  @apply text-destructive;
}

.inputfield-disabled {
  @apply opacity-50;
}

.inputfield-required {
  @apply text-destructive ml-1;
}

.inputfield-size-sm {
  @apply h-8 text-xs;
}

.inputfield-size-default {
  @apply h-10 text-sm;
}

.inputfield-size-lg {
  @apply h-12 text-base;
}

.inputfield-variant-ghost {
  @apply border-none shadow-none;
}

.inputfield-error-border {
  @apply border-destructive focus-visible:ring-destructive;
}

.inputfield-error-message {
  @apply text-xs text-destructive mt-1;
}

.tableviewer-container {
  @apply w-full;
}

.tableviewer-card {
  @apply w-full;
}

.tableviewer-card-content {
  @apply flex items-center justify-center py-6;
}

.tableviewer-no-data-text {
  @apply text-sm text-muted-foreground;
}

.tableviewer-header {
  @apply flex items-center justify-between mb-2;
}

.tableviewer-title {
  @apply text-lg font-medium;
}

.tableviewer-toggle-button {
  @apply p-0 h-9 w-9 flex items-center justify-center;
}

.tableviewer-chevron {
  @apply h-4 w-4 transition-transform duration-200 m-auto;
}

.tableviewer-chevron-rotated {
  @apply -rotate-90;
}

.tableviewer-table-container {
  @apply overflow-auto transition-all duration-200 ease-in-out;
}

.tableviewer-expanded {
  @apply opacity-100 max-h-[2000px];
}

.tableviewer-collapsed {
  @apply opacity-0 max-h-0;
}

.tableviewer-header-cell {
  @apply font-medium text-left text-gray-500 py-2;
}

.tableviewer-row {
  @apply cursor-pointer;
}

.tableviewer-hoverable {
  @apply hover:bg-muted/50;
}

.tableviewer-striped {
  @apply bg-muted/50;
}

.tableviewer-dense {
  @apply h-8;
}

.tableviewer-normal {
  @apply h-12;
}

.tableviewer-cell {
  @apply p-2 md:p-4;
}

.tableviewer-cell-dense {
  @apply py-1 text-sm;
}

.tableviewer-card-header {
  @apply flex flex-row items-center justify-between space-y-0 pb-2;
}

.tableviewer-card-content-collapsed {
  @apply transition-all duration-200 ease-in-out p-0 opacity-0 h-0 overflow-hidden;
}

.tableviewer-card-content-expanded {
  @apply transition-all duration-200 ease-in-out p-0 opacity-100;
}

.spinner-container {
  @apply flex flex-col items-center justify-center gap-3 p-4;
}

.spinner-label {
  @apply text-sm font-medium text-muted-foreground;
}

.spinner-animation {
  @apply rounded-full animate-spin border-primary/30 border-t-primary;
}

.spinner-size-sm {
  @apply w-4 h-4 border-2;
}

.spinner-size-default {
  @apply w-8 h-8 border-2;
}

.spinner-size-lg {
  @apply w-12 h-12 border-4;
}

.spinner-card-content {
  @apply pt-6;
}

.slider-container {
  @apply space-y-4;
}

.slider-header {
  @apply flex items-center justify-between;
}

.slider-label {
  @apply text-sm font-medium;
}

.slider-label-disabled {
  @apply opacity-50;
}

.slider-value {
  @apply text-sm text-muted-foreground font-medium;
}

.slider-wrapper {
  @apply p-4 bg-white;
}

.slider-track {
  @apply w-full h-2 bg-gray-200 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2;
}

.slider-min-max {
  @apply flex justify-between;
}

.slider-minmax-label {
  @apply text-sm text-muted-foreground;
}

.slider-card-content {
  @apply pt-6;
}

.progress-container {
  @apply w-full;
}

.progress-header {
  @apply pb-2;
}

.progress-header-content {
  @apply flex items-center justify-between;
}

.progress-label {
  @apply text-sm font-medium text-muted-foreground;
}

.progress-value {
  @apply text-sm font-medium text-muted-foreground;
}

.progress-bar {
  @apply transition-all duration-300;
}

.progress-size-sm {
  @apply h-2;
}

.progress-size-default {
  @apply h-3;
}

.progress-size-lg {
  @apply h-4;
}

.progress-steps {
  @apply mt-4 grid grid-cols-4 gap-2;
}

.progress-step {
  @apply text-center text-sm transition-colors duration-200;
}

.progress-step-active {
  @apply text-primary font-medium;
}

.progress-step-inactive {
  @apply text-muted-foreground;
}

.image-widget {
  @apply w-full h-auto max-w-sm rounded-md border border-gray-200 p-6 mx-auto;
}

.plotly-container {
  @apply w-full h-full;
}

.plotly-card-content {
  @apply p-0;
}

.plotly-loading-container {
  @apply flex flex-col items-center justify-center h-64;
}

.plotly-loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-4;
}

.plotly-loading-text {
  @apply text-sm text-muted-foreground;
}

.plotly-plot-container {
  @apply relative w-full;
  min-height: 400px;
}

.plotly-download-button {
  @apply absolute top-2 right-2 opacity-0 transition-opacity duration-200 ease-in-out;
}

.plotly-plot-container:hover .plotly-download-button {
  @apply opacity-100;
}

.plotly-progress-container {
  @apply absolute top-0 left-0 right-0 z-10 bg-background/80 backdrop-blur-sm px-4 py-2;
}

.plotly-progress-bar {
  @apply w-full h-2;
}

.plotly-plot {
  @apply w-full h-full;
}

.dag-visualizer-container {
  @apply relative transition-all duration-300;
}

.dag-visualizer-fullscreen {
  @apply fixed inset-0 z-50 m-4;
}

.dag-visualizer-error-card {
  @apply border-red-200 bg-red-50;
}

.dag-visualizer-error-title {
  @apply text-red-700;
}

.dag-visualizer-error-text {
  @apply text-red-600;
}

.dag-visualizer-controls {
  @apply absolute top-2 right-2 z-10 flex items-center gap-2;
}

.dag-visualizer-content {
  @apply p-0;
}

.dag-visualizer-content-fullscreen {
  @apply h-full;
}

.dag-visualizer-content-default {
  @apply h-[600px];
}

.dag-visualizer-loading {
  @apply flex items-center justify-center h-full;
}

.dag-visualizer-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900;
}

.dag-visualizer-node-panel {
  @apply absolute bottom-4 left-4 right-4 max-w-md mx-auto transition-all duration-300;
}

.dag-visualizer-node-panel-visible {
  @apply opacity-100 translate-y-0;
}

.dag-visualizer-node-panel-hidden {
  @apply opacity-0 translate-y-5;
}

.dag-visualizer-node-header {
  @apply pb-2;
}

.dag-visualizer-node-title {
  @apply text-lg;
}

.dag-visualizer-node-close {
  @apply sr-only;
}

.dag-visualizer-node-details {
  @apply space-y-3;
}

.dag-visualizer-node-status {
  @apply flex items-center gap-2;
}

.dag-visualizer-node-status-label {
  @apply text-sm font-medium text-muted-foreground;
}

.dag-visualizer-node-error-label {
  @apply text-sm font-medium text-red-500;
}

.dag-visualizer-node-error-text {
  @apply mt-1 text-sm text-red-600 bg-red-50 p-2 rounded;
}

.dag-visualizer-node-dependencies {
  @apply mt-1 flex flex-wrap gap-1;
}

.dag-visualizer-tooltip-trigger {
  @apply h-4 w-4;
}

.dag-visualizer-tooltip-content {
  @apply text-xs;
}

.download-dropdown {
  @apply absolute right-0 mt-2 z-10 bg-white border border-gray-300 rounded;
}

.download-option {
  @apply px-4 py-2 cursor-pointer whitespace-nowrap;
}

.download-option:hover {
  @apply bg-gray-100;
}

/* Platform/Section Headers in Sidebar */
.sidebar-section-header {
  @apply px-2 py-4 text-xs font-medium text-muted-foreground/70 uppercase tracking-wider;
}

/* Mobile Sidebar Close Button */
[data-state='open'] > button {
  @apply border-0 shadow-none !important;
}

.sidebar-group {
  @apply relative flex w-full min-w-0 flex-col p-2;
}

.sidebar-group-label {
  @apply flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2;
}

.sidebar-group-content {
  @apply w-full text-sm;
}

.sidebar-menu {
  @apply flex w-full min-w-0 flex-col gap-1;
}

.sidebar-menu-item {
  @apply relative;
}

.sidebar-menu-button {
  @apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50;
}

.sidebar-menu-action {
  @apply absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2;
}

.sidebar-menu-badge {
  @apply pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground;
}

.sidebar-separator {
  @apply mx-2 w-auto bg-sidebar-border;
}

.sidebar-section {
  @apply relative flex w-full flex-col p-2;
}

.sidebar-section-header {
  @apply flex h-8 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70;
}

.sidebar-section-content {
  @apply w-full text-sm;
}

.sidebar-menu {
  @apply flex w-full flex-col gap-1;
}

.sidebar-menu-item {
  @apply relative;
}

.sidebar-menu-button {
  @apply flex w-full items-center gap-2 rounded-md p-2 text-left text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:opacity-50;
}

.sidebar-menu-action {
  @apply absolute right-1 top-1.5 flex h-5 w-5 items-center justify-center rounded-md text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring;
}

.sidebar-menu-badge {
  @apply absolute right-1 top-1.5 flex h-5 min-w-[1.25rem] items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground;
}

.sidebar-separator {
  @apply mx-2 h-px w-auto bg-sidebar-border;
}

/* Tetris Loading Animation */
.tetris-board {
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  gap: 1px;
  background-color: #f3f4f6;
  padding: 4px;
  border-radius: 4px;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.02);
}

.tetris-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
}

.tetris-cell {
  aspect-ratio: 1;
  background-color: #ffffff;
  border-radius: 1px;
  transition: background-color 0.2s ease;
}

/* Error Report */
.error-report-container {
  @apply overflow-y-auto transition-[max-height] duration-300 ease-in-out;
  max-height: 10rem;
}

.error-report-container.expanded {
   max-height: 80vh; /* Limit to 80% of the viewport height */
}

.error-report-list {
  @apply list-disc list-inside space-y-1;
}

.error-report-toggle {
  @apply text-xs text-muted-foreground hover:underline mt-2 cursor-pointer;
}
